/*
 *@description:订单管理
 *@Author:@reynold
 *@Date:2025-03-22 11:05:03
 *@Update:2025-03-22 11:05:03
 *@Version: V1.0.0
*/
<template>
  <div class="order-management-container">
    <Card>
      <div class="tab_box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="所有订单" name="first">
            <!-- 表格 -->
            <el-table :data="allOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status === '待派单' && item === '状态'">待派单</el-tag>
                  <el-tag type="warning" size="mini" effect="dark" v-else-if="scope.row.status === '待接单' && item === '状态'">待接单</el-tag>
                  <el-tag type="info" size="mini" effect="dark" v-else-if="scope.row.status === '待服务' && item === '状态'">待服务</el-tag>
                  <el-tag type="primary" size="mini" effect="dark" v-else-if="scope.row.status === '待确认' && item === '状态'">待确认</el-tag>
                  <el-tag type="success" size="mini" effect="dark" v-else-if="scope.row.status === '已完成' && item === '状态'">已完成</el-tag>
                  <el-tag type="danger" size="mini" effect="dark" v-else-if="scope.row.status === '待支付' && item === '状态'">待支付</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn2" type="text" size="small" @click="sendOrder(scope.row)" v-if="scope.row.status === '待派单'">派单</el-button>
                  <el-button class="columnBtn3" type="text" size="small" @click="resetOrder(scope.row)" v-else-if="scope.row.status === '待接单'">取消派单</el-button>
                  <el-button class="columnBtn4" type="text" size="small" @click="completePayment(scope.row)" v-if="scope.row.status === '待支付'">完成支付</el-button>
                  <el-button class="columnBtn5" type="text" size="small" @click="acceptOrder(scope.row)" v-if="scope.row.status === '待接单'">接单</el-button>
                  <el-button class="columnBtn6" type="text" size="small" @click="startService(scope.row)" v-if="scope.row.status === '待服务'">去服务</el-button>
                  <el-button class="columnBtn7" type="text" size="small" @click="confirmOrder(scope.row)" v-if="scope.row.status === '待确认'">确认完成</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待支付" name="second">
            <el-table :data="pendingPaymentOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="danger" size="mini" effect="dark" v-if="scope.row.status === '待支付' && item === '状态'">待支付</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn4" type="text" size="small" @click="completePayment(scope.row)">完成支付</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingPaymentOrders.length">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待派单" name="third">
            <el-table :data="pendingDispatchOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status === '待派单' && item === '状态'">待派单</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn2" type="text" size="small" @click="sendOrder(scope.row)">派单</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingDispatchOrders.length">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待接单" name="fourth">
            <el-table :data="pendingAcceptanceOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="warning" size="mini" effect="dark" v-if="scope.row.status === '待接单' && item === '状态'">待接单</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn3" type="text" size="small" @click="resetOrder(scope.row)">取消派单</el-button>
                  <el-button class="columnBtn5" type="text" size="small" @click="acceptOrder(scope.row)">接单</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingAcceptanceOrders.length">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待服务" name="fifth">
            <el-table :data="pendingServiceOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="info" size="mini" effect="dark" v-if="scope.row.status === '待服务' && item === '状态'">待服务</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn6" type="text" size="small" @click="startService(scope.row)">去服务</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingServiceOrders.length">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待确认" name="six">
            <el-table :data="pendingConfirmationOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="primary" size="mini" effect="dark" v-if="scope.row.status === '待确认' && item === '状态'">待确认</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                  <el-button class="columnBtn7" type="text" size="small" @click="confirmOrder(scope.row)">确认完成</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingConfirmationOrders.length">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="seventh">
            <el-table :data="completedOrders" style="width: 100%">
              <el-table-column
                v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
                <template slot-scope="scope">
                  <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status === '已完成' && item === '状态'">已完成</el-tag>
                  <span v-else>{{ scope.row[index] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="completedOrders.length">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'

export default {
  data() {
    return {
      pageQuery: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      currentPage: 4,
      activeName: 'first',
      data: {
        tableHeader: { orderNum: '订单编号', orderTime: '下单时间', price: '总价', status: '状态', customId: '顾客ID', employeeId: '员工ID' },
        tableData: [
          {
            orderNum: '1231',
            orderTime: '2016-05-02',
            price: 1230,
            status: '待支付',
            customId: '456',
            employeeId: '987'
          },
          {
            orderNum: '1232',
            orderTime: '2016-05-03',
            price: 2340,
            status: '待派单',
            customId: '457',
            employeeId: '988'
          },
          {
            orderNum: '1233',
            orderTime: '2016-05-04',
            price: 3450,
            status: '待接单',
            customId: '458',
            employeeId: '989'
          },
          {
            orderNum: '1234',
            orderTime: '2016-05-05',
            price: 4560,
            status: '待服务',
            customId: '459',
            employeeId: '990'
          },
          {
            orderNum: '1235',
            orderTime: '2016-05-06',
            price: 5670,
            status: '待确认',
            customId: '460',
            employeeId: '991'
          }
        ]
      },
      allOrders: [],
      pendingPaymentOrders: [],
      pendingDispatchOrders: [],
      pendingAcceptanceOrders: [],
      pendingServiceOrders: [],
      pendingConfirmationOrders: [],
      completedOrders: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getOrderList()
    },
    handleClick(tab, event) {
      this.getOrderList()
    },
    // 获取所有订单数据
    getOrderList() {
      this.allOrders = this.data.tableData
      this.pendingPaymentOrders = this.allOrders.filter(order => order.status === '待支付')
      this.pendingDispatchOrders = this.allOrders.filter(order => order.status === '待派单')
      this.pendingAcceptanceOrders = this.allOrders.filter(order => order.status === '待接单')
      this.pendingServiceOrders = this.allOrders.filter(order => order.status === '待服务')
      this.pendingConfirmationOrders = this.allOrders.filter(order => order.status === '待确认')
      this.completedOrders = this.allOrders.filter(order => order.status === '已完成')
      this.total = this.allOrders.length
    },
    // 查看订单详情
    showOrder(scope) {
      console.log(scope)
    },
    // 派单的方法
    sendOrder(scope) {
      scope.status = '待接单'
      this.getOrderList()
      utils.showSuccess('派单成功')
    },
    // 取消派单
    resetOrder(scope) {
      scope.status = '待派单'
      this.getOrderList()
      utils.showSuccess('取消派单成功')
    },
    // 完成支付
    completePayment(scope) {
      scope.status = '待派单'
      this.getOrderList()
      utils.showSuccess('支付成功')
    },
    // 接单
    acceptOrder(scope) {
      scope.status = '待服务'
      this.getOrderList()
      utils.showSuccess('接单成功')
    },
    // 开始服务
    startService(scope) {
      scope.status = '待确认'
      this.getOrderList()
      utils.showSuccess('完成服务')
    },
    // 确认订单
    confirmOrder(scope) {
      scope.status = '已完成'
      this.getOrderList()
      utils.showSuccess('订单已完成')
    }
  },
  components: {
    Card
  },
  created() {
    this.getOrderList()
  }
}
</script>

<style lang="less" scoped>
.order-management-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.tab_box {
  /deep/ .el-tabs__item.is-active {
    color: #4069e4e7;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #4069e4e7;
  }

  /deep/ .el-table {
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
  }

  /deep/ .el-pagination {
    margin-top: 20px;
  }
}

.columnBtn1,
.columnBtn2,
.columnBtn3,
.columnBtn4,
.columnBtn5,
.columnBtn6,
.columnBtn7 {
  color: #4069e4e7;
}

.columnBtn1:hover,
.columnBtn2:hover,
.columnBtn3:hover,
.columnBtn4:hover,
.columnBtn5:hover,
.columnBtn6:hover,
.columnBtn7:hover {
  text-decoration: underline;
}
</style>     